<template>
  <div>
    <div class="swip">
      <swiper @mouseenter.native="stopSwiper" @mouseleave.native="starSwiper" ref="mySwiper" class="swiper" :options="swiperOption">
        <swiper-slide>
          <img src="../assets/img/20211012149205757408.png" />
        </swiper-slide>
        <swiper-slide>
          <img src="../assets/img/20191118163553842257.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img src="../assets/img/202110121422205749083.png" />
        </swiper-slide>
      </swiper>
      <img src="../assets/img/bg01.png" />
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        effect: "cards", // 特效，   cube：立方体  coverflow; fade; flip; cards；
        loop: true, // 循环滚动
        // autoplay: true, // 自动滚动
        autoplay: {
          delay: 1000, //设置滚动间隔时间，ms
          disableOnInteraction: false, // 用户操作后停止滚动
          // pauseOnMouseEnter: true, // 鼠标悬停停止滚动，此版本swiper不生效
        },
        // 添加页数指示点配置项，  clickable：设置为true可以点击指示点切换图片
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 添加轮播图左右切换按钮配置项
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  methods: {
    stopSwiper() {
      this.$refs.mySwiper.$swiper.autoplay.stop();
    },
    starSwiper() {
      this.$refs.mySwiper.$swiper.autoplay.start();
    },
  },
};
</script>
<style lang="scss" scoped>
.swip {
  position: relative;
  > img {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
  }
}
</style>
